<template>
  <div>
    <Dialog :show="show" title="新增安排" @confirm="confirm" @cancel="cancel">
      <div>
        内容  <input v-model="msg"/>
      </div>
    </Dialog>
    <TripView :list="info.list" @getDetail="getDetail"></TripView>

    <div class="detail" style="position: fixed; right: 10px; top: 50px">
      <div class="tr">
        <div class="td">时间</div>
        <div class="td">事件</div>
      </div>
      <div class="tr" v-for="item in detail.list" :key="item">
        <div class="td">
          {{ item.start + ':' + item.end }}
        </div>
        <div class="td" @click="addDetail(item)">
          {{ item.info }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref,watch} from 'vue'
import Dialog from '../components/DialogView.vue'
import TripView from '../components/TripView.vue'

let  msg   =ref("");//新增的事件
let addTargetInfo = ref({});//新增的目标对象
let  infoTarget = ref({});//


let info = ref({ //行程的数据
  list: [
    { id: 3, date: '2023-9-16', start: '2023-9-16 9:01', end: '2023-9-16 12:00', msg: '上午上课' },
    { id: 1, date: '2023-9-17', start: '2023-9-17 9:01', end: '2023-9-17 10:00', msg: '自习' },
    {
      id: 4,
      date: '2023-9-16',
      start: '2023-9-16 14:01',
      end: '2023-9-16 16:00',
      msg: '下午看医生'
    }
  ]
});
let detail = ref({ //时间的数据
  list: []
})
let  show  = ref(false); //弹出框是否显示


let  confirm = ()=>{ //弹框里面的确认
  console.log(msg.value);
  console.log(addTargetInfo.value);
 info.value.list.push({
    msg:msg.value,
    start:addTargetInfo.value.start,
    end:addTargetInfo.value.end,
    date:new Date(addTargetInfo.value.start).format("yyyy-mm-dd"),
    id:10
 });
 show.value = false;
 addTargetInfo.value.info = msg.value;

}
let  cancel = ()=>{//取消
  show.value = false;
}

let createTimeList = (info) => {//每天一天的时分秒的列表显示
 
  
  detail.value.list = [];
  let date = info.date;
 
  let  remarkList  = info.remarkList;//事件的详情

  for (let i = 1; i <= 24; i++) {
    let start = new Date('2000-01-01')
    start.setFullYear(date.getFullYear())
    start.setMonth(date.getMonth())
    start.setDate(date.getDate())
    start.setHours(i - 1)
    start.setMinutes(0)
    start.setSeconds(0)

    let end = new Date('2000-01-01')
    end.setFullYear(date.getFullYear())
    end.setMonth(date.getMonth())
    end.setDate(date.getDate())
    end.setHours(i)
    end.setMinutes(0)
    end.setSeconds(0)


    let  findList  = remarkList.filter(item=>{
        let  start1   = new Date(item.start);
        let  end1  = new  Date(item.end);
        return   start1<end&&end<=end1;
    })

    let obj = {
      end,
      start: start.format('yyyy-mm-dd  hh:MM:ss'),
      end: end.format('yyyy-mm-dd  hh:MM:ss'),
      info:findList.length?findList[0]["msg"]:""
    }
    detail.value.list.push(obj)
  }
}



let getDetail = (detail) => {//展示时分秒的列表
  createTimeList(detail);
}
let addDetail  = (info)=>{  //新增事件
   console.log(info);
  if(!info.info){
    show.value = true;
    addTargetInfo.value  = info;
  }
}

</script>

<style scoped>
.tr {
  width: 600px;
  display: flex;
}
.tr .td {
  flex: 1;
  border: 1px solid black;
}
</style>
